<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>当当网</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <link rel="stylesheet" href="css/index.css">

    <link rel="shortcut icon" href="images/favicon.ico">
</head>
<body>
<div id="app">
    <el-container class="contain">
        <!--头部-->
        <el-header class="header">
            <div class="h_pic">
                <a href="#">
                    <img src="images/小巨幕广告.jpg">
                </a>
            </div>
            <div class="h_top_up">
                <el-row gutter="20">
                    <el-col span="2" id="top_up_left">
                        <div class="h_top_up_left">
                            <template>
                                <div>
                                    <el-dropdown @command="handleSelect" class="custom-dropdown">
                                        <span class="el-dropdown-link">
                                            <p>送至：</p>
                                            <p>{{selectedAddress}}</p>
                                            <i class="el-icon-arrow-down el-icon--right"></i>
                                        </span>
                                        <el-dropdown-menu slot="dropdown" class="custom-dropdown-menu">
                                            <div class="address-grid">
                                                <el-dropdown-item
                                                        v-for="(item, index) in limitedAddress"
                                                        :key="index"
                                                        :command="item"
                                                        class="address-item"
                                                >
                                                    {{ item }}
                                                </el-dropdown-item>
                                            </div>
                                            </el-scrollbar>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </template>
                        </div>
                    </el-col>
                    <el-col span="6" id="top_up_middle">
                        <div class="welcome" style="width: 176px">
                            <span>欢迎光临当当,请</span><a href="#" id="login">登录</a>
                            <a href="#">成为会员</a>
                        </div>
                    </el-col>
                    <el-col span="2" id="top_up_right_1" class="not" style="width: 91px">
                        <i class="el-icon-shopping-cart-2" style="color: red;font-weight: bold;"></i>
                        <a href="#">购物车</a><b>0</b>
                    </el-col>
                    <el-col span="2" id="top_up_right_2" style="width: 91px">
                        <a href="#">我的订单</a>
                    </el-col>
                    <el-col span="2" id="top_up_right_3" style="width: 91px">
                        <a href="#">我的云书房</a>
                    </el-col>
                    <el-col span="2" id="top_up_right_4" class="btn btn1" style="width: 91px">
                        <el-dropdown style="font-size: 12px; font-weight: bold;">
                            <span class="el-dropdown-link">
                              <a href="#">我的当当</a><i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown" class="btn-dropmenu">
                                <el-dropdown-item style="font-size: 12px; font-weight: bold;"><a href="#">银铃铛抵现</a></el-dropdown-item>
                                <el-dropdown-item style="font-size: 12px; font-weight: bold;"><a href="#">我的收藏</a></el-dropdown-item>
                                <el-dropdown-item style="font-size: 12px; font-weight: bold;"><a href="#">我的余额</a></el-dropdown-item>
                                <el-dropdown-item style="font-size: 12px; font-weight: bold;"><a href="#">我的评论</a></el-dropdown-item>
                                <el-dropdown-item style="font-size: 12px; font-weight: bold;"><a href="#">礼券/礼品卡</a></el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                    <el-col span="2" id="top_up_right_5" class="btn btn2" style="width: 86px">
                        <el-dropdown style="font-size: 12px; font-weight: bold;">
                            <span class="el-dropdown-link">
                              <a href="#">0元领物</a><i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown" class="btn-dropmenu">
                                <el-dropdown-item style="font-size: 12px; font-weight: bold;"><a href="#">0元领物</a></el-dropdown-item>
                                <el-dropdown-item style="font-size: 12px; font-weight: bold;"><a href="#">当当拼团</a></el-dropdown-item>
                                <el-dropdown-item style="font-size: 12px; font-weight: bold;"><a href="#">1元砍价</a></el-dropdown-item>
                                <el-dropdown-item style="font-size: 12px; font-weight: bold;"><a href="#">1分抽奖</a></el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                    <el-col span="2" id="top_up_right_6" style="width: 91px">
                        <a href="#">小说投稿</a>
                    </el-col>
                    <el-col span="2" id="top_up_right_7" class="btn btn3" style="width: 91px">
                        <el-dropdown style="font-size: 12px; font-weight: bold;">
                            <span class="el-dropdown-link">
                              <a href="#">企业采购</a><i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown" class="btn-dropmenu">
                                <el-dropdown-item style="font-size: 12px; font-weight: bold;"><a href="#">大宗采购</a></el-dropdown-item>
                                <el-dropdown-item style="font-size: 12px; font-weight: bold;"><a href="#">礼品卡采购</a></el-dropdown-item>
                                <el-dropdown-item style="font-size: 12px; font-weight: bold;"><a href="#">礼品卡激活</a></el-dropdown-item>
                                <el-dropdown-item style="font-size: 12px; font-weight: bold;"><a href="#">礼品卡使用</a></el-dropdown-item>
                                <el-dropdown-item style="font-size: 12px; font-weight: bold;"><a href="#">分销/荐购</a></el-dropdown-item>
                                <el-dropdown-item style="font-size: 12px; font-weight: bold;"><a href="#">礼品卡专区</a></el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                    <el-col span="2" id="top_up_right_8" class="btn btn4" style="width: 91px">
                        <el-dropdown style="font-size: 12px; font-weight: bold;">
                            <span class="el-dropdown-link">
                              <a href="#">客户服务</a><i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown" class="btn-dropmenu">
                                <el-dropdown-item style="font-size: 12px; font-weight: bold;"><a href="#">帮助中心</a></el-dropdown-item>
                                <el-dropdown-item style="font-size: 12px; font-weight: bold;"><a href="#">自助退换货</a></el-dropdown-item>
                                <el-dropdown-item style="font-size: 12px; font-weight: bold;"><a href="#">自助发票</a></el-dropdown-item>
                                <el-dropdown-item style="font-size: 12px; font-weight: bold;"><a href="#">联系客服</a></el-dropdown-item>
                                <el-dropdown-item style="font-size: 12px; font-weight: bold;"><a href="#">我要投诉</a></el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </div>
            <div class="h_top_center">
                    <el-row gutter="20">
                        <!-- logo图片部分 -->
                        <el-col span="4" class="login">
                            <img src="./images/ddLogo.jpg" style="width: 330px;">
                        </el-col>
                        <!-- 搜索部分 -->
                        <el-col span="14" class="search">
                            <!-- 搜索框部分 -->
                            <div style="margin-top: 15px;">
                                <el-input placeholder="请输入内容" v-model="searchBox" class="input-with-select" style="width: 565.2px;height: 39.2px">
                                    <el-select v-model="select" slot="suffix" placeholder="全部分类">
                                        <el-option label="全部分类" value="1"><a href="#">全部分类</a></el-option>
                                        <el-option label="唯品会" value="2"><a href="#">唯品会</a></el-option>
                                        <el-option label="图书" value="3"><a href="#">图书</a></el-option>
                                        <el-option label="电子书" value="4"><a href="#">电子书</a></el-option>
                                        <el-option label="音像" value="5"><a href="#">音像</a></el-option>
                                        <el-option label="影视" value="6"><a href="#">影视</a></el-option>
                                        <el-option label="时尚美妆" value="7"><a href="#">时尚美妆</a></el-option>
                                        <el-option label="母婴用品" value="8"><a href="#">母婴用品</a></el-option>
                                        <el-option label="玩具" value="9"><a href="#">玩具</a></el-option>
                                        <el-option label="孕婴服饰" value="10"><a href="#">孕婴服饰</a></el-option>
                                        <el-option label="童装童鞋" value="11"><a href="#">童装童鞋</a></el-option>
                                        <el-option label="家居日用" value="12"><a href="#">家居日用</a></el-option>
                                        <el-option label="家具装饰" value="13"><a href="#">家具装饰</a></el-option>
                                        <el-option label="服装" value="14"><a href="#">服装</a></el-option>
                                        <el-option label="鞋袜" value="15"><a href="#">鞋袜</a></el-option>
                                        <el-option label="箱包皮具" value="16"><a href="#">箱包皮具</a></el-option>
                                        <el-option label="手表装饰" value="17"><a href="#">手表装饰</a></el-option>
                                        <el-option label="运动户外" value="18"><a href="#">运动户外</a></el-option>
                                        <el-option label="汽车用品" value="19"><a href="#">汽车用品</a></el-option>
                                        <el-option label="食品" value="20"><a href="#">食品</a></el-option>
                                        <el-option label="手机通讯" value="21"><a href="#">手机通讯</a></el-option>
                                        <el-option label="数码影音" value="22"><a href="#">数码影音</a></el-option>
                                        <el-option label="电脑办公" value="23"><a href="#">电脑办公</a></el-option>
                                        <el-option label="大家电器" value="24"><a href="#">大家电器</a></el-option>
                                        <el-option label="家用电器" value="25"><a href="#">家用电器</a></el-option>
                                    </el-select>
                                    <el-button slot="append" icon="el-icon-search"  class="custom-button" @click="handleSearch"></el-button>
                                </el-input>
                            </div>
                            <!-- 热搜部分 -->
                            <div class="search_down">
                                <ul>
                                    热搜：
                                    <a href="#"><li>独木舟新书</li></a>
                                    <a href="#"><li>少儿英语</li></a>
                                    <a href="#"><li>老爸评测</li></a>
                                    <a href="#"><li>诺贝尔经济学奖</li></a>
                                    <a href="#"><li>牛津</li></a>
                                </ul>
                                <div class="height_search">
                                    <a href="#"><p>高级搜索</p></a>
                                </div>
                            </div>
                        </el-col>

                        <el-col span="6" class="shopCat" style="padding-right: 0px">
                            <!-- 右侧购物车 -->
                            <el-button class="car" icon="el-icon-shopping-cart-2" type="danger" plain>
                                <span>购物车</span>
                                <span>0</span>
                            </el-button>
                            <el-button class="order" plain class="order">我的订单</el-button>
                        </el-col>
                    </el-row>
                </div>

            <!-- 一级导航栏 -->
            <div class="h-nav">
                <ul class="h-nav-ul">
                    <li class="all"><a href="#" id="all-category">全部商品分类</a><i class="el-icon-arrow-down"></i></li>
                    <li><a href="#">图书</a></li>
                    <li><a href="#">电子书</a></li>
                    <li><a href="#">童装童鞋</a></li>
                    <li><a href="#">女装</a></li>
                    <li><a href="#">食品</a></li>
                    <li><a href="#">母婴玩具</a></li>
                </ul>
            </div>
        </el-header>

        <!--主体-->


        <!--尾部-->
        <el-footer class="footer">
            <div class="footer-top">
                <div class="footer-top-pic">
                    <a href="#"><span>正规渠道正品保障</span></a>
                    <a href="#"><span>625城市次日达到</span></a>
                    <a href="#"><span>退货无忧购物无忧</span></a>
                </div>
            </div>
            <div class="footer-body">
                <div class="footer-sort">
                    <span>购物指南</span>
                    <ul>
                        <li><a href="#">购物流程</a></li>
                        <li><a href="#">发票制度</a></li>
                        <li><a href="#">服务协议</a></li>
                        <li><a href="#">会员优惠</a></li>
                    </ul>
                </div>
                <div class="footer-sort">
                    <span>支付方式</span>
                    <ul>
                        <li><a href="#">网上支付</a></li>
                        <li><a href="#">礼物卡支付</a></li>
                        <li><a href="#">银行转账</a></li>
                        <li><a href="#">礼券支付</a></li>
                    </ul>
                </div>
                <div class="footer-sort">
                    <span>订单服务</span>
                    <ul>
                        <li><a href="#">配送服务查询</a></li>
                        <li><a href="#">订单状态说明</a></li>
                        <li><a href="#">自动取消订单</a></li>
                        <li><a href="#">自动修改订单</a></li>
                    </ul>
                </div>
                <div class="footer-sort">
                    <span>配送方式</span>
                    <ul>
                        <li><a href="#">当日递</a></li>
                        <li><a href="#">次日达</a></li>
                        <li><a href="#">订单自提</a></li>
                        <li><a href="#">验货与签收</a></li>
                    </ul>
                </div>
                <div class="footer-sort">
                    <span>退换货</span>
                    <ul>
                        <li><a href="#">退换货服务查询</a></li>
                        <li><a href="#">自动申请退换货</a></li>
                        <li><a href="#">退换货进度查询</a></li>
                        <li><a href="#">退款方式与时间</a></li>
                    </ul>
                </div>
                <div class="footer-sort">
                    <span>商家服务</span>
                    <ul>
                        <li><a href="#">商家中心</a></li>
                        <li><a href="#">运营服务</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="nav">
                    <a href="#">公司简介</a><span>|</span>
                    <a href="#">诚聘英才</a><span>|</span>
                    <a href="#">网站联盟</a><span>|</span>
                    <a href="#">当当招商</a><span>|</span>
                    <a href="#">机构销售</a><span>|</span>
                    <a href="#">手机当当</a><span>|</span>
                    <a href="#">官方Blog</a><span>|</span>
                    <a href="#">知识产权</a><span>|</span>
                    <a href="#">热词搜索</a>
                </div>
                <div class="copyright">
                    <span>copyright 2004 - 2021 当当网. All Righes Reserved</span>
                </div>
                <div class="information">
                    <span>京ICP证041189号</span>
                    <span class="sep">|</span>
                    <a href="#"><span>出版物经营许可证 新出发京批字第直0673号</span></a>
                    <span class="sep">|</span>
                    <a href="#"><span>食品经营许可证：JY11101050363440</span></a>
                    <br>
                    <a href="#"><span>京ICP备17043473号-1</span></a>
                    <span class="sep">|</span>
                    <a href="#"><img style="vertical-align: middle;" src="images/jinggongwanganbei.png"><span style="margin-left:5px">京公网安备11010502037644号</span></a>
                    <span class="sep">|</span>
                    <a href="#"><span>经营许可证编号：合字B2-20160011</span></a>
                    <span class="sep">|</span>
                    <a href="#"><span>互联网药品信息服务资格证</span></a>
                    <br>
                    <span>互联网违法和不良信息举报电话：4001066666-5，涉未成年举报电话：4001066666-9，邮箱：</span>
                    <a href="#"><span>service@cs.dangdang.com</span></a>
                    <br>
                    <span><a href="#">北京当当科文电子商务有限公司</a>，通信地址：北京市东城区藏经馆胡同17号1幢A103室</span>
                </div>
                <div class="icon">
                    <div class="validator log1">
                        <a href="#"><img src="images/7d593c48-48f6-4fc9-85e0-7d6e10dfc2a2.hpvgUvc9"></a>
                    </div>
                    <div class="validator log2">
                        <a href="#"><img src="images/brand_128_47.png"></a>
                    </div>
                    <div class="validator log3">
                        <a href="#"><img src="images/hlwjbzx_182.png"></a>
                    </div>
                    <div class="validator log4">
                        <a href="#"><img src="images/cnnic.png"></a>
                    </div>
                    <div class="validator log4">
                        <a href="#"><img src="images/acc2_icon_06-1642647403.jpg"></a>
                    </div>
                </div>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                address: [
                    '北京', '天津', '河北', '山西', '内蒙古',
                    '辽宁', '吉林', '黑龙江', '上海', '江苏',
                    '浙江', '安徽', '福建', '江西', '山东',
                    '河南', '湖北', '湖南', '广东', '广西',
                    '海南', '重庆', '四川', '贵州', '云南',
                    '西藏', '陕西', '甘肃', '青海', '宁夏',
                    '新疆', '台湾', '香港', '澳门', '钓鱼岛'
                ],
                selectedAddress: '北京',
                searchBox: "",
                select: "",
            }
        },
        computed: {
            limitedAddress() {
                const rowLimit = 7;
                const colLimit = 5;
                const totalCount = rowLimit * colLimit;
                return this.address.slice(0, totalCount);
            },
        },
        methods: {
            handleSelect(address) {
                this.selectedAddress = address;
                console.log('Selected:', address);
            },
            handleSearch(){

            }
        }
    })
</script>
</html>